/**
 * 学习目标：setState的使用
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    count: 1,
    list: ['123', '345'],
  };
  handleClick = () => {
    // 修改状态state
    console.log('获取数据', this.state.count);
    // 不可以像Vue中一样，直接修改state数据的值
    // this.state.count += 1;
    // React内置了更新state的方法，就是setState
    this.setState({ count: this.state.count + 1 });
  };

  handleAdd = () => {
    console.log('this.state.list', this.state.list);
    // react中没有v-for更新监测，push方法修改了list，也不会导致界面更新
    // this.state.list.push('456');
    // 还是要通过this.setState()函数去更新
    this.setState({
      list: [...this.state.list, '456'],
    });
  };

  render() {
    return (
      <div>
        <p>次数: {this.state.count}</p>
        <ul>
          {this.state.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.handleClick}>点我+1</button>
        <button onClick={this.handleAdd}>点我数组添加新的元素</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
